<template>
    <div class="overview">
        <div class="ge_content">
            <div class="ge_content_left" style="display:flex">
                <choosestatus v-if="this.projectform.status!='03'&&this.projectform.status!='04'" :status='this.projectform.status|textfilters' @updateclick='updateclick'></choosestatus>
                <i v-else-if="this.projectform.status=='04'" class="iconfont  icon-yemian-1" style="color:rgb(255,165,0)"></i>
                <i v-else-if="this.projectform.status=='03'" class="iconfont  icon-yemian-1" style="color:red"></i>
                <span style="font-size: 14px;margin-right:16px;margin-left:16px">{{this.projectform.status|textfilters}}</span>
                <span class="ge_content_left_span" v-for="element in  projectform.tags">{{element.name}}</span>
                <span style="font-size: 14px;">项目负责人：<span class="strong_text_name">{{projectform.masterSysUser?projectform.masterSysUser.userName:'无'}}</span></span>
                <span style="font-size: 14px;">邮箱地址：<span class="strong_text_name">{{projectform.mailbox?projectform.mailbox:'无'}}</span></span>
            </div>
            <div class="ge_content_right">
                <el-button type="primary" v-if="projectform.revise=='0'&&projectform.isModi=='0'" @click="drawershow">事务审批</el-button>
                <el-button type="primary" v-if="projectform.revise=='1'&&projectform.isModi=='0'" @click="uptatedetails">修改</el-button>
                <el-button type="warning" v-if="sysUser.userId=='admin'" @click="uptatedetails">修改</el-button>
                <el-button type="info" v-if="projectform.isModi=='1'">事物审批中</el-button>
                <el-button type="primary" @click="delectclick">删除</el-button>
            </div>
        </div>
        <div>
            <el-row>
                <el-col :span="8">
                    <div class="grid_content bg-purple">
                        <div class="grid_content_block">
                            <div class="grid_content_span">总任务数</div>
                            <div class="grid_content_number">{{taskSum.taskNum}}</div>
                        </div>
                        <div class="grid_content_block">
                            <div class="grid_content_span">任务完成数</div>
                            <div class="grid_content_number">{{taskSum.finishNum}}</div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="1">
                    <div> &nbsp</div>
                </el-col>
                <el-col :span="15">
                    <div class="grid_content bg-purple">
                        <div class="grid_content_block">
                            <div class="grid_content_span">需求</div>
                            <div class="grid_content_number">{{taskTotal.demand}}</div>
                        </div>
                        <div class="grid_content_block">
                            <div class="grid_content_span">设计</div>
                            <div class="grid_content_number">{{taskTotal.Design}}</div>
                        </div>
                        <div class="grid_content_block">
                            <div class="grid_content_span">开发</div>
                            <div class="grid_content_number">{{taskTotal.development}}</div>
                        </div>
                        <div class="grid_content_block">
                            <div class="grid_content_span">测试</div>
                            <div class="grid_content_number">{{taskTotal.test}}</div>
                        </div>
                        <div class="grid_content_block">
                            <div class="grid_content_span">缺陷</div>
                            <div class="grid_content_number">{{taskTotal.defect}}</div>
                        </div>
                        <div class="grid_content_block">
                            <div class="grid_content_span">其他</div>
                            <div class="grid_content_number">{{taskTotal.other}}</div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="cpnter_app"></div>
        <div class="ge_content_app">
            <div class="ge_content_app_left">
                <task></task>
                <div class="cpnter_app"></div>
                <div class="ge_content_app_border">
                    <milepost @detailsgo='detailsgo' @detailscreated='detailscreated'></milepost>
                </div>
                <div class="ge_content_app_border" style="padding-left:15px;padding-right:15px;margin-top:15px">
                    <introduction :projectform='projectform' style="margin-top:15px"></introduction>
                </div>
            </div>
            <div class="ge_content_app_content">
            </div>
            <div class="ge_content_app_right">
                <comRate :taskSum='taskSum' :taskTotal='taskTotal'></comRate>
                <div class="cpnter_app"></div>
                <projectMembers @memberAdd='memberAdd' :projectform='projectform'></projectMembers>
            </div>
        </div>

    </div>
</template>
<script>
import { deleteAction, getAction, postAction, putAction } from "@/api/manage";
import permission from "@/directive/permission";
import choosestatus from "@/components/projectComponents/choosestatus";
import echarts from "echarts";
import task from "@/components/projectComponents/Task";
import comRate from "@/components/projectComponents/comRate";
import milepost from "@/components/projectComponents/milepost";
import projectMembers from "@/components/projectComponents/projectMembers";
import { taskTotal } from "@/api/task";
import { update, del, projChange } from "@/api/project";
import introduction from "@/components/project/introduction";
import { mapState, mapGetters } from "vuex";
export default {
    props: ["form"],
    components: {
        task,
        comRate,
        milepost,
        projectMembers,
        choosestatus,
        introduction,
    },
    computed: {
        ...mapGetters(["sysRole",'sysUser']),
    },
    data() {
        return {
            content: "",
            processName: "",
            process: [],
            dialogVisible: false,
            modelId: "",
            projId: "",
            drawer: false,
            taskTotal: {
                demand: 0, //需求
                Design: 0, //设计
                development: 0, //开发
                test: 0, //测试
                defect: 0, //缺陷
                other: 0, //其他
            },
            taskSum: {
                taskNum: 0,
                finishNum: 0,
                timeoutNum: 0,
            },
            projectform: {},
        };
    },
    filters: {
        textfilters(val) {
            if (val == "00") {
                return "待确认";
            } else if (val == "01") {
                return "进行中";
            } else if (val == "02") {
                return "已完成";
            } else if (val == "03") {
                return "已终止";
            } else if (val == "04") {
                return "已中止";
            }
        },
    },
    watch: {
        form: {
            handler(val, oldval) {
                this.projectform = val;
            },
            // 深度观察监听
            deep: true,
            immediate: true,
        },
    },
    created() {
        this.projId = this.$route.query.id;
        this.taskTotalclick();
    },
    mounted() {
        // this.charts('main');
        var that = this;
        // <!--把window.onresize事件挂在到mounted函数上-->
        // window.onresize = () => {
        //     return (() => {
        //         window.fullWidth = document.documentElement.clientWidth;
        //       that.windowWidth = window.fullWidth; // 宽
        //     })()
        //   };
        // this.$nextTick(function () {
        // })
        // this.$nextTick(function () {
        //  this.charts('main');
        // })
    },
    methods: {
        drawershow() {
            this.$router.push({
                path: "/project/projApply",
                query: { id: this.$route.query.id,dirId:this.$route.query.dirId},
            });
        },

        delectclick() {
            const params = new URLSearchParams();
            params.append("ids", this.$route.query.id);
            this.$confirm("确认彻底删除项目?(有子项目时不可删除)", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                del(params, false).then((res) => {
                    this.$message("删除成功!");
                    this.$store
                        .dispatch("tagsView/delView", this.$route)
                        .then(({ visitedViews }) => {
                            this.$router.push({ path: "/project/index" });
                        }); // 关闭当前tab回到列表
                });
            });
        },
        uptatedetails() {
            this.$router.push({
                path: "/project/edit",
                query: { id: this.$route.query.id },
            });
        },
        updateclick(data) {
            let params = new URLSearchParams();
            params.append("projId", this.projectform.projId);
            params.append("status", data);
            projChange(params).then((res) => {
                this.projectform.status = data;
                this.$message("修改成功");
            });
            if (data == "01") {
                this.projectform.revise = "0";
            }
        },
        taskTotalclick() {
            taskTotal({ projId: this.projId }, false).then((res) => {
                this.taskSum = res.data.taskSum;
                res.data.taskTotal.forEach((item) => {
                    switch (item.taskType) {
                        case "00":
                            this.taskTotal.demand = item.taskNum;
                            break;
                        case "01":
                            this.taskTotal.Design = item.taskNum;
                            break;
                        case "02":
                            this.taskTotal.development = item.taskNum;
                            break;
                        case "04":
                            this.taskTotal.test = item.taskNum;
                            break;
                        case "05":
                            this.taskTotal.defect = item.taskNum;
                            break;
                        case "06":
                            this.taskTotal.other = item.taskNum;
                            break;
                    }
                });
            });
        },
        memberAdd() {
            this.$emit("resetForm", "member", "成员");
        },
        detailscreated() {
            this.$emit("resetForm", "addmilepost", "里程碑");
        },
        detailsgo() {
            this.$emit("c", "milepost", "里程碑");
        },
        //    charts() {
        //         this.myChart = echarts.init(document.getElementsByClassName("main")[0]);
        //         this.myChart.setOption({
        //                           title: {
        //                 text: '燃尽图：',
        //             },
        //             tooltip: {
        //                 trigger: 'axis'
        //             },
        //             legend: {
        //                 right: 40,
        //                 data: ['剩余工作量', '任务量']
        //             },
        //             xAxis: {
        //                 type: 'category',
        //                 boundaryGap: false,
        //                 splitLine: {
        //                     show: false
        //                 },
        //                 data: ['迭代一', '迭代二', '迭代三', '迭代四', '迭代五']
        //             },
        //             yAxis: {},
        //             series: [
        //                 {
        //                     name: '剩余工作量',
        //                     type: 'line',
        //                     // stack: '剩余工作量',
        //                     data: [5, 4.6, 3.9, 2.7, 0.2],
        //                     itemStyle: {
        //                         normal: {
        //                             // 折点颜色样式
        //                             color: 'green',
        //                             lineStyle: {
        //                                 // 折线颜色样式
        //                                 color: 'green'
        //                             }
        //                         }
        //                     },
        //                     // data: this.opinionData,
        //                 },
        //                 {
        //                     name: '任务量',
        //                     type: 'line',
        //                     data: [5, 4, 3, 2, 0],
        //                     itemStyle: {
        //                         normal: {

        //                          // 折点颜色样式
        //                             color: 'orange',
        //                             lineStyle: {
        //                                 // 折线颜色样式
        //                                 color: 'orange'
        //                             }
        //                         }
        //                     },
        //                 },
        //             ]
        //         })
        //     },
    },
};
</script>
 <style scoped>
.overview {
    width: 100%;
    min-width: 800px;
}
.ge_content {
    width: 100%;
    /* height: 10px; */
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
}
.ge_content_left {
    display: flex;
    align-items: flex-end;
}
.ge_content_left_span {
    /* width: 30px; */
    border-radius: 5px;
    padding: 2px;
    font-size: 12px;
    display: block;
    color: #2c7ef8;
    border-color: #2c7ef8;
    border: solid 1px #2c7ef8;
    margin-right: 16px;
}
.strong_text {
    color: rgb(46, 64, 94);
    font-weight: 700;
    font-size: 14px;
}
.strong_text_name {
    color: rgb(44, 126, 248);
    font-size: 14px;
    margin-right: 16px;
}
.ge_content_right_button {
    background-color: rgb(44, 126, 248);
    height: 32px;
}
.grid_content {
    width: 100%;
    padding: 24px;
    border-color: #ecedf0;
    height: 120px;
    border: 1px solid rgb(236, 237, 240);
    display: flex;
    justify-content: space-between;
}
.ge_content_app {
    display: flex;
    justify-content: space-between;
}
.ge_content_app_left {
    flex: 7;
}
.ge_content_app_right {
    flex: 3;
}
.ge_content_app_content {
    flex: 0.5;
}
.grid_content_block {
    width: 45%;
    height: 76px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    cursor: pointer;
}
.grid_content_block:hover {
    background-color: rgb(245, 246, 248);
}
.grid_content_span {
    width: 100%;
    font-size: 13px;
    font-weight: 400;
    color: rgb(46, 64, 94);
    text-align: center;
    /* width: ; */
}
.grid_content_number {
    font-size: 24px;
    font-weight: 600;
    color: rgb(46, 64, 94);
    font-family: fangsong;
}
.main {
    width: 100%;
    height: 300px;
    margin: 0 auto;
}
.gF_content {
    padding-top: 14px;
}
.ge_content_app_border {
    border: solid 1px #ecedf0;
}
.cpnter_app {
    width: 100%;
    height: 24px;
}

.popover-content-title {
    color: #2e405e;
    font-size: 14px;
    display: block;
    width: 100%;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
}

.popover-content-title:hover {
    background-color: #f5f6f8;
}
</style>
